import { Meta } from '@storybook/addon-docs';

<Meta title="Design system/Cards" />

<h1 class="text-xl font-semibold mb-lg">Cards</h1>

<h2 class="text-lg font-semibold mb-md">Default Card</h2>

<div class="mb-lg">
  <h3 class="text-lg text-muted mb-xs">Base Card</h3>
  <p class="mb-md text-muted mb-0">
    The default card interface is used when pulling out an inline-form or other
    dialogue control.
  </p>
  <p class="mb-md text-muted mb-sm">
    By default the card will not have any shadow when laid on top of the
    background.
  </p>
  <div class="bg-white rounded p-md border border-gray-300">
    This is a card component.
  </div>
</div>

<div class="mb-lg">
  <h3 class="text-lg text-muted mb-xs">Nested Cards</h3>
  <p class="mb-md text-muted mb-sm">
    A shadow is used to elevate a nested card within its parent card.
  </p>
  <div class="bg-white rounded p-md border border-gray-300">
    This is a card component with a nested inner-card.
    <div class="bg-white rounded p-md mt-md shadow border border-gray-300">
      This is a nested card found within a parent card.
    </div>
  </div>
</div>

<h2 class="text-lg font-semibold mb-md">Indicator Card</h2>

<div class="mb-lg">
  <h3 class="text-lg text-muted mb-xs">Indicator Cards</h3>
  <p class="mb-md text-muted mb-0">
    Cards can also be used in conjunction with an indication state.
  </p>
  <p class="mb-md text-muted mb-sm">
    By default cards should use the `info` state if using an indicator.
  </p>
  <div class="bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-secondary">
    This is a card component with an `info` indication state.
  </div>
  <div class="bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-green-600">
    This is a card component with an `positive` indication state.
  </div>
  <div class="bg-white rounded p-md border border-gray-300 border-l-4 border-l-red-600">
    This is a card component with an `negative` indication state.
  </div>
</div>

<h3 class="text-lg text-muted mb-xs">Indicator Cards w/ Icons</h3>
<p class="mb-md text-muted mb-0">
  Indicator cards can also have circle indicators for iconography describing the
  message which they contain.
</p>
<p class="mb-md text-muted mb-sm">
  This can help use the card system as a form of inline-notification.
</p>

<div class="flex items-center bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-secondary">
  <div class="flex items-center justify-center h-xl w-xl rounded-full bg-indigo-100 mr-md">
    <svg
      class="w-6 h-6 text-blue-800 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
    </svg>
  </div>
  <div>
    <p class="m-0 font-semibold">Card headline goes here</p>
    <p class="m-0 text-muted">Card copy goes here...</p>
  </div>
</div>

<div class="flex items-center bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-green-600">
  <div class="flex items-center justify-center h-xl w-xl rounded-full bg-green-100 mr-md">
    <svg
      class="w-6 h-6 text-green-800 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path>
    </svg>
  </div>
  <div>
    <p class="m-0 font-semibold">Card headline goes here</p>
    <p class="m-0 text-muted">Card copy goes here...</p>
  </div>
</div>

<div class="flex items-center bg-white rounded p-md mb-sm border border-gray-300 border-l-4 border-l-red-600">
  <div class="flex items-center justify-center h-xl w-xl rounded-full bg-red-100 mr-md">
    <svg
      class="w-6 h-6 text-red-800 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"></path>
    </svg>
  </div>
  <div>
    <p class="m-0 font-semibold">Card headline goes here</p>
    <p class="m-0 text-muted">Card copy goes here...</p>
  </div>
</div>
